import 'package:flutter/material.dart';
import 'package:mall/components/image_network.dart';
import 'package:mall/core/models/store_index.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mall/screens/product/product_page.dart';

import '../../../constants.dart';
import '../../../theme.dart';

/// 楼层
class HomeFloor extends StatefulWidget {
  final List<Floor> floor;

  const HomeFloor({
    Key key,
    @required this.floor,
  }) : super(key: key);

  @override
  _HomeFloorState createState() => _HomeFloorState();
}

class _HomeFloorState extends State<HomeFloor> {
  int _floorIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: List.generate(widget.floor.length, _buildFloorItem),
          ),
        ),
        SizedBox(height: 8.w),
        if (widget.floor.isNotEmpty)
          Wrap(
            spacing: 8.w,
            runSpacing: 8.w,
            children: List.generate(widget.floor[_floorIndex].productLinks.length, _buildItem),
          )
      ],
    );
  }

  Widget _buildFloorItem(int index) {
    bool selected = _floorIndex == index;
    final floor = widget.floor[index];
    return GestureDetector(
      onTap: () => _onTapFloorItem(index),
      child: Container(
        margin: EdgeInsets.only(left: 8.w),
        child: Column(
          children: [
            Text(
              "${floor.title}",
              style: TextStyle(
                color: selected ? Theme.of(context).primaryColor : kTextColor,
                fontSize: 13.sp,
              ),
            ),
            SizedBox(height: 4.w),
            Container(
              width: 70.w,
              height: 2.w,
              color: selected ? Theme.of(context).primaryColor : Colors.transparent,
            ),
          ],
        ),
      ),
    );
  }

  /// 点击商区
  void _onTapFloorItem(int index) {
    setState(() {
      _floorIndex = index;
    });
  }

  /// 商区商品
  Widget _buildItem(int index) {
    final link = widget.floor[_floorIndex].productLinks[index];
    return GestureDetector(
      onTap: () => _onTapItem(link),
      child: Container(
        width: 175.5.w,
        height: 240.w,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(4.w),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.vertical(top: Radius.circular(4.w)),
              child: ImageNetwork(
                url: "${link.image}",
                width: 175.5.w,
                height: 175.5.w,
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(4.w, 4.w, 4.w, 0),
              child: Text(
                "${link.title}",
                style: TextStyle(fontSize: 13.sp),
                maxLines: 2,
              ),
            ),
            Spacer(),
            Padding(
              padding: EdgeInsets.fromLTRB(4.w, 0, 4.w, 4.w),
              child: Text(
                "¥ 0",
                style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 14.sp),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 点击商品
  void _onTapItem(Link link) {
    final uri = Uri.tryParse("$api_base_url${link.link}");
    debugPrint("$uri");
    final mId = int.tryParse("${uri?.pathSegments?.last}");
    final r = int.tryParse("${uri?.queryParameters["r"]}");
    Navigator.of(context).pushNamed(
      ProductPage.routeName,
      arguments: ProductPageArgs(null, null, mId, r),
    );
  }
}
